<template>
    <div>
        <Card dis-hover :bordered="false">
            <Row>
                <Col span="2">
                <List class="ivu-sidebar">
                    <span v-for="item in sidebar" :key="item.id" @click="changeTab(item.address)">
                        <ListItem :class="item.address === tabId ? 'ivu-active' : ''">{{ item.name }}</ListItem>
                    </span>
                </List>
                </Col>
                <Col span="21">
                <component :is="tabId"></component>
                </Col>
            </Row>
        </Card>
    </div>
</template>
<script>
    import report from './report.vue';// 报告
    import speech from './speech.vue';
    import configuration from './configuration.vue';// 配置
    import keywords from './keywords.vue';// 搜索词报告
    export default {
        name: 'feedBackForm',
        components: {
            report,
            configuration,
            keywords,
            speech
        },
        data() {
            return {
                tabId: 'keywords',
                sidebar: [
                    // { id: 1, name: '报告', address: 'report' },
                    { id: 3, name: '搜索词报告', address: 'keywords' },
                    { id: 4, name: '词性分析', address: 'speech' },
                    { id: 2, name: '配置', address: 'configuration' },
                ]
            };
        },
        methods: {
            changeTab(address) {
                this.tabId = address;
            }
        }
    };
</script>
<style>
  .ivu-sidebar span {
    cursor: pointer;
  }

  .ivu-active {
    font-weight: bold;
    color: #55b6ec;
  }
</style>
